<template>
  <div class="warehouse-container">
    <!-- 顶部流程图 -->
    <div class="flow-chart">
      <img v-if="userLanguage.code == 'zh_CN'" src="@/assets/images/icons/order_warehouse.png" class="flow-img" alt="">
      <img v-else src="@/assets/images/icons/order_warehouse.png" class="flow-img" alt="">
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="title">{{ $t('user.myWarehouse') }}</div>
      <!-- 顶部标签和助手按钮 -->
      <div class="content-header">
        <div class="tabs-container">
          <Tabs :value="form.isParcelable" @on-click="selectTab">
            <TabPane :label="$t('wayBill.tab_text_parcel')" name="Y"></TabPane>
            <TabPane :label="renderLabel" name="N"></TabPane>
          </Tabs>
        </div>
        <div class="assistant-btn" @click="openMet()">
          <span class="assistant-icon">?</span>
          {{ $t(titleName) }}
        </div>
      </div>

      <!-- 搜索区域 -->
      <div class="search-area">
        <div class="search-group">
          <Input prefix="ios-search" v-model="form.orderNo" @on-keyup="keySearch" :placeholder="$t('user.masterOrder')"
            class="search-input" />
          <DatePicker class="date-picker" @on-change="changeDate" clearable type="daterange" placement="bottom-end"
            :placeholder="$t('user.start_end')"></DatePicker>
          <Button type="primary" @click="SearchMet()">{{ $t('estimation.check') }}</Button>
        </div>
      </div>

      <!-- 表格区域 -->
      <div class="table-area">
        <div class="table-wrapper">
          <!-- 表头 -->
          <div class="table-header">
            <div class="header-row">
              <div class="header-col col-6">{{ $t('user.commodityInfo') }}</div>
              <div class="header-col col-3">{{ $t('user.warehousingTime') }}</div>
              <div class="header-col col-2">{{ $t('user.quantity') }}</div>
              <div class="header-col col-3">{{ $t('user.weight') }}(g)</div>
              <div class="header-col col-3">{{ $t('user.dimension') }}(cm)</div>
              <div class="header-col col-2">{{ $t('user.orderStatus') }}</div>
              <div class="header-col col-3">{{ $t('user.commodityType') }}</div>
              <!-- <div class="header-col col-2">{{ $t('user.operate') }}</div> -->
            </div>
          </div>

          <!-- 表格内容 -->
          <div class="table-body">
            <t-loading v-if="loading"></t-loading>
            <t-no-data v-if="!loading && dataList.length == 0"></t-no-data>

            <div class="table-item" v-for="item in dataList" :key="item.id">
              <!-- 订单顶部信息 -->
              <div class="item-header">
                <div class="header-left">
                  <t-platform class="platform-tag" :type="item.channel"></t-platform>
                  <Divider type="vertical" />
                  <span class="order-number">{{ $t('user.orderNumber') }}：{{ item.id }}</span>
                  <div class="info-item">
                    <span>{{ $t("user.creationTime") }}: {{ item.createTime }}</span>
                  </div>
                  <div class="info-item">
                    <span>{{ $t("user.stash") }}: {{ appName }} {{ $t("user.stash") }}</span>
                  </div>
                </div>

              </div>

              <!-- 订单主体内容 -->
              <div class="item-content">
                <div class="content-row">
                  <!-- 商品信息 -->
                  <div class="content-col col-6">
                    <div class="product-info">
                      <Checkbox v-model="item.active" @on-change="onSelectGoods" :disabled="item.disabled"
                        class="product-checkbox"></Checkbox>
                      <div class="product-image">
                        <product-picture v-if="item.mainImg" :image-list="[item.mainImg]"></product-picture>
                        <img v-else src="@/assets/images/public/default-image.png" alt="">
                      </div>
                      <div class="product-detail">
                        <router-link v-if="item.channel"
                          :to="`/goods/details?id=${item.spuNo}&channel=${item.channel}` + (userInfo.inviteCode ? `&inviteCode=${userInfo.inviteCode}` : '')"
                          class="product-title">
                          {{ item.subject }}
                        </router-link>
                        <div v-else @click="jumpBtn(item.detailUrl)" class="product-title" style="cursor: pointer;">
                          {{ item.subject }}
                        </div>
                        <div class="product-attr" v-for="attributeItem in item.skuAttrEnumFormatList"
                          :key="attributeItem.id">
                          {{ attributeItem.name }}：{{ attributeItem.value }}
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 入库时间 -->
                  <div class="content-col col-3">
                    <div class="storage-time">
                      <div>{{ dayjs(item.storedTime).format('YYYY-MM-DD') }}</div>
                      <Poptip placement="bottom" v-model="item.visible" v-if="item.storedTime" max-width="300"
                        popper-class="item-poptip">
                        <div class="price" slot="content">
                          {{ item.periodTip }}
                        </div>
                        <span class="storage-days" @mouseenter="handleMouseEnter(item)"
                          @mouseleave="handleMouseLeave(item)">
                          <span class="time-icon">⏱️</span>
                          {{ item.freeStorageDays }}{{ $t('user.sky') }}
                        </span>
                      </Poptip>
                    </div>
                  </div>

                  <!-- 数量 -->
                  <div class="content-col col-2">
                    x {{ item.quantity }}
                  </div>

                  <!-- 重量 -->
                  <div class="content-col col-3">
                    {{ item.weight }}
                  </div>

                  <!-- 尺寸 -->
                  <div class="content-col col-3" v-if="item.height && item.width">
                    {{ item.length }}
                    {{ item.length && (item.width || item.height) ? '*' : '' }}
                    {{ item.width }}
                    {{ item.width && (item.length || item.height) ? '*' : '' }}
                    {{ item.height }}
                  </div>

                  <!-- 订单状态 -->
                  <div class="content-col col-2">
                    <order-status :status="item.orderStatus" :statusName="item.orderStatusName"
                      :subStatus="item.internalStatus"></order-status>
                  </div>

                  <!-- 商品类型 -->
                  <div class="content-col col-3" v-if="item.categoryName">
                    <span class="category-tag">
                      <span class="text" :title="item.categoryName">{{ item.categoryName }}</span>
                      <Tooltip placement="left" max-width="200">
                        <span class="help-icon">?</span>
                        <div slot="content" class="type-desc">{{ $t('user.status_tips') }}</div>
                      </Tooltip>
                    </span>
                  </div>

                  <!-- 操作 -->
                  <div class="content-col col-2" v-if="false">
                    <div class="action-btns">
                      <div class="detail-btn" @click="detMet(item)">{{ $t('user.order_detail') }}</div>

                      <!-- 延长保管期 -->
                      <div v-if="!item.storageOrderList || (item.storageOrderList && item.storageOrderList.length == 0)"
                        class="extend-btn" @click="extensionMet(item)">
                        {{ $t('wayBill.extension_btn_text') }}
                      </div>

                      <!-- 申请退货 -->
                      <div
                        v-if="item.returnable && item.returnOrderApplyTime && item.serverTime < item.returnOrderApplyTime">
                        <div class="return-btn" @click="applyBtn(item)">{{ $t('user.apply_text') }}</div>
                        <Tooltip placement="left">
                          <div class="countdown">
                            <count-down :current-time="item.serverTime"
                              :end-time="item.returnOrderApplyTime"></count-down>
                            <span class="help-icon small">?</span>
                          </div>
                          <div slot="content" style="white-space: normal;">{{ $t('user.count_time_tips') }}</div>
                        </Tooltip>
                      </div>

                      <div>
                        <!-- 取消退货 -->
                        <div class="cancel-btn" @click="cancelApply(item)"
                          v-if="item.orderStatus == 'RETURNING_GOODS' && item.returnOrder && (item.returnOrder.status == 'UNPAYMENT' || item.returnOrder.status == 'UNCONFIRM') && item.returnOrder.returnReason != 'Payment Dispute'">
                          {{ $t('user.cancel_apply') }}
                        </div>
                        <!-- 补款 -->
                        <div class="repay-btn" @click="cancelMend(item)"
                          v-if="item.orderStatus == 'RETURNING_GOODS' && item.returnOrder && item.returnOrder.status == 'UNPAYMENT'">
                          {{ $t('user.mend_text') }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="content-tools">

                  <!-- 商品图片 -->
                  <div class="product-photos" v-if="item.photos && item.photos.length > 0">
                    <span class="photos-label">{{ $t('user.ordinaryPhotograph') }}</span>
                    <div class="photos-list">
                      <img class="photo" v-for="(imageItem, imageIndex) in item.photos" :key="imageIndex"
                        :src="imageItem" @click="viewPicture(item.photos, imageIndex)" alt="">
                    </div>

                  </div>

                  <!-- 质检反馈 -->
                  <div class="inspection-feedback" v-if="item.checkMsg || item.checkPhotos.length > 0">
                    <div class="feedback-text">
                      {{ $t('user.qualityInspectionReminder') }}：
                    </div>
                    <div class="feedback-photos">
                      <img v-for="(checkItem, checkIndex) in item.checkPhotos" :key="checkIndex" class="photo"
                        @click="viewPicture(item.checkPhotos, checkIndex)" :src="checkItem + '_256x256.webp'" alt="">
                    </div>
                  </div>

                  <!-- 延长保管期服务 -->
                  <div class="storage-services" v-if="item.storageOrderList && item.storageOrderList.length > 0">
                    <div class="service-item" v-for="(seItem, seIndex) in item.storageOrderList" :key="seIndex">
                      <div class="service-info">
                        <div class="service-desc">
                          <span>{{ $t('wayBill.service_label_text') }}</span>
                          <span class="service-price">￥{{ seItem.payAmount }}</span>
                          <span>{{ bigTimes(item.quantity, 30) }}{{ $t('user.sky') }}</span>
                        </div>
                        <div class="service-actions">
                          <span class="service-status">{{ $t('user.waitPayment') }}</span>
                          <span class="service-btn pay" @click="payMet(seItem)">{{ $t('user.pay') }}</span>
                          <span class="service-btn cancel" @click="cancelMet(seItem)">{{ $t('wayBill.cancel_pop_text')
                          }}</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- 定制异常和留言信息 -->
                  <div class="custom-messages"
                    v-if="item.cancelAdditionalTime || (item.displayRemarks && item.displayRemarks.length > 0)">
                    <div class="messages-content" :class="{ 'expanded': item.showMore }">
                      <!-- 定制异常 -->
                      <div class="custom-exception" v-if="item.cancelAdditionalTime">
                        <div class="exception-header">
                          <span class="warning-icon">⚠️</span>
                          <span>{{ item.cancelAdditionalTime }}</span>
                        </div>
                        <div class="exception-text">{{ $t('custom.cancel_text_content') }}</div>
                      </div>

                      <!-- 留言信息 -->
                      <div class="remark-item" v-for="(v, n) in item.displayRemarks" :key="n"
                        v-if="item.displayRemarks && item.displayRemarks.length > 0">
                        <div class="remark-header">
                          <span class="info-icon">ℹ️</span>
                          <span>{{ v.time }}</span>
                        </div>
                        <div class="remark-text">{{ v.remark }}</div>
                        <div class="remark-photos">
                          <img v-for="(a, i) in v.photosList" :key="i" @click="lookMet(i, v.photosList)"
                            class="remark-photo" :src="a" alt="">
                        </div>
                      </div>
                    </div>

                    <!-- 展开/收起 -->
                    <div class="toggle-expand" @click="item.showMore = !item.showMore">
                      {{ item.showMore ? $t('goods.hide_text_content') : $t('home.seeMore') }}
                      <span class="arrow-icon">{{ item.showMore ? '↑' : '↓' }}</span>
                    </div>
                  </div>

                  <!-- 客服咨询按钮 -->
                  <div class="consult">
                    <Button type="primary" ghost @click="showChatPop(item.id)">
                      <span>{{ $t("user.consult") }}</span>
                    </Button>
                  </div>
                </div>


              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination">
        <Page :total="totalPage" :page-size-opts="sizeOpts" @on-page-size-change="onPageSize" :current="form.pageNo"
          @on-change="onPage" :page-size="form.pageSize" show-sizer />
      </div>

      <!-- 底部操作栏 -->
      <div class="footer-actions">
        <div class="action-left">
          <Checkbox v-model="all" @on-change="onAll" class="select-all" :disabled="form.isParcelable == 'N'">
            <span>{{ $t('user.selectAll') }}</span>
          </Checkbox>
        </div>
        <div class="action-right">
          <div class="selected-count">
            <i18n path="user.selectedOrder">
              <span slot="num" class="count-number">{{ selectLength }}</span>
            </i18n>
          </div>
          <Button type="primary" @click="crateExpressOrderPre" :loading="createLoading" class="create-waybill-btn">
            {{ $t('user.createWaybill') }}
          </Button>
        </div>
      </div>
    </div>

    <!-- 各种弹窗组件 -->
    <order-detail ref="childOrder"></order-detail>
    <order-details-pop ref="detRef"></order-details-pop>
    <cancel-extension-pop ref="cancelExtensionRef" @changeDate="getDataList"></cancel-extension-pop>
    <returns-com ref="returnRef" :orderNo="orderNo" :orderInfo="orderInfo"></returns-com>
    <cancel-return ref="cancelRef" :orderNo="orderNo"></cancel-return>
    <guide-assiatant ref="guideRef" :dataArr="guideArr" :titleData="titleName"></guide-assiatant>

    <!-- 选择地址弹窗 -->
    <Modal width="60%" class-name="address-modal" v-model="selectAddressPop" :title="$t('submitParcel.selectAddress')">
      <div class="address-content">
        <div class="address-table">
          <div class="address-header">
            <div class="address-col col-7">{{ $t('user.orderNumber') }}</div>
            <div class="address-col col-7">{{ $t('submitParcel.addressee') }}</div>
            <div class="address-col col-10">{{ $t('submitParcel.detailedAddress') }}</div>
          </div>
          <RadioGroup style="width: 100%" v-model="orderAddressId">
            <div class="address-body">
              <div class="address-row" v-for="(item, index) in userAddressList" :key="index">
                <div class="address-col col-7">
                  <Radio :label="item.id">
                    <span>{{ item.orderNo }}</span>
                  </Radio>
                </div>
                <div class="address-col col-7">
                  {{ item.recipientName.split(',')[0] }} {{ item.recipientName.split(',')[1] }}
                </div>
                <div class="address-col col-10">
                  <div>{{ item.postalCode }} +{{ item.regionCode }} {{ item.mobile }}</div>
                  <div>
                    {{ item.addressDetail }} {{ item.areaText ? item.areaText + ',' : '' }}{{ item.cityText ?
                      item.cityText + ',' : '' }}{{ item.provinceText }},{{ item.countryText }}
                  </div>
                  <div class="address-tag">{{ item.townText }}</div>
                </div>
              </div>
            </div>
          </RadioGroup>
        </div>
      </div>
      <div slot="footer">
        <Button @click="selectAddressPop = false">{{ $t('user.cancel') }}</Button>
        <Button @click="onSelectAddressId" :disabled="orderAddressId != '' ? false : true" type="primary">
          {{ $t('user.confirm') }}
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { expressOrderPre, parcelList } from "@/api/expressOrder";
import TLoading from "@/components/t-loading";
import TNoData from "@/components/t-no-data";
import ProductPicture from "@/views/main/user/components/product-picture";
import { mapState } from "vuex";
import OrderStatus from "@/views/main/user/components/order-status";
import TPlatform from "@/components/t-platform";
import dayjs from "dayjs";
import ReturnsCom from './components/returns-com.vue';
import CountDown from "@/views/main/user/components/count-down";
import CancelReturn from "./components/cancel-return.vue";
import { pointUser } from "@/common/point/api-hook";//打点日志
import GuideAssiatant from './components/guide-assiatant.vue';
import { Button, Tooltip } from 'view-design';
import OrderDetailsPop from './components/order-details-pop.vue';
import CancelExtensionPop from './components/cancel-extension-pop.vue';
import OrderDetail from './components/order-detail.vue';
import { bigTimes } from "@/common/digital-computation";

export default {
  name: "order",
  components: { ProductPicture, TNoData, TLoading, OrderStatus, TPlatform, ReturnsCom, CountDown, CancelReturn, GuideAssiatant, OrderDetailsPop, CancelExtensionPop, OrderDetail },
  computed: {
    ...mapState({
      userLanguage: (state) => state.user.userLanguage,
      userInfo: state => state.user.userInfo,
      userCurrency: state => state.user.userCurrency,
      storageFreePeriod: (state) => state.config.config.storageFreePeriod
    })
  },
  data() {
    return {
      appName: "100buy",
      userAddressList: [], // 选择的地址列表
      selectAddressPop: false, // 选择收货地址
      goodsImage: '',
      cancelPop: false, // 取消弹窗
      all: false,
      cancelLoading: false, // 放弃商品loading
      selectLength: 0,
      orderNumList: [], // 选择的物流订单
      form: {
        isParcelable: 'Y',
        orderNo: '', // 订单号
        pageNo: 1, // 页
        pageSize: 50, // 页数
        status: '' // 运单状态
      },
      orderAddressId: '', // 选择收货地址
      totalPage: 1,
      sizeOpts: [50, 100, 150, 200],
      dataList: [], // 订单列表
      createLoading: false,
      loading: false,
      model1: '',
      images: [], // 查看图片
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
      ],
      orderNo: '',
      orderInfo: {},
      guideArr: [
        { id: 1, title: 'assistant.assistantWarehouseSub1', img: 'https://libcdn1.hahbuy.com/guide/提交包裹&重新提交包裹&支付预估运费.gif' },
        { id: 2, title: 'assistant.assistantWarehouseSub2', img: 'https://libcdn1.hahbuy.com/guide/提交包裹&重新提交包裹&支付预估运费.gif' },
        { id: 3, title: 'assistant.assistantWarehouseSub3', img: '' },
        { id: 4, title: 'assistant.assistantWarehouseSub4', img: 'https://libcdn1.hahbuy.com/guide/提交包裹&重新提交包裹&支付预估运费.gif' }
      ],
      titleName: 'assistant.assistantWarehouse',
      visible: false
    }
  },
  created() {
    if (this.$route.params.orderNo) {
      this.form.orderNo = this.$route.params.orderNo;
    }
    this.getDataList()
  },
  methods: {
    dayjs,
    bigTimes,
    lookMet(index, photosList) {
      this.$viewerApi({
        images: photosList,
        options: {
          initialViewIndex: index,
        },
      });
    },
    jumpBtn(url) {
      window.location.href = url;
    },
    // 客服
    showChatPop(order) {
      if (window.ssq) {
        ssq.push('chatOpen');
        ssq.push('sendTextMessage', "Hi,my order No. " + order);
      }
    },
    // 申请退货
    applyBtn(info) {
      this.orderNo = info.id;//子订单ID
      this.orderInfo = info;//订单信息
      this.$refs.returnRef.returnPop = true;//显示弹框
      this.$refs.returnRef.getReturnFee(info.id);//子单退货-费用
    },
    // 取消退货
    cancelApply(info) {
      this.orderNo = info.returnOrder.id;//退货ID
      this.$refs.cancelRef.cancelPop = true;//取消退货弹框
    },
    //补款
    cancelMend(item) {
      this.$router.push(`/pay?id=${item.returnOrder.id}&markText=mend`);
    },
    // 日期筛选
    changeDate(val) {
      this.form.createTimeStart = val[0];
      this.form.createTimeEnd = val[1];
    },
    onHidePop() {
      // 关闭弹窗
      this.cancelPop = false;
    },
    onCancelPop(info) {
      // 显示取消弹窗
      this.cancelPop = true;
      this.goodsImage = info.imageUrl;
    },
    onCancelOrder() {

    },
    viewPicture(list, index) {
      // 查看图片
      this.images = list;
      this.$viewerApi({
        images: this.images,
        options: {
          initialViewIndex: index
        }
      })
    },
    onAll() {
      // 选择全部
      if (this.all) {
        for (let i = 0; i < this.dataList.length; i++) {
          if (!this.dataList[i].disabled) {
            this.dataList[i].active = true;
          }
        }
      } else {
        for (let i = 0; i < this.dataList.length; i++) {
          if (!this.dataList[i].disabled) {
            this.dataList[i].active = false;
          }
        }
      }
      this.onSelectGoods();
    },
    onSelectGoods() {
      // 选择商品
      this.selectLength = 0;
      for (let i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i].active) {
          this.selectLength = this.selectLength + 1;
        }
      }
      if (this.selectLength == this.dataList.length) {
        this.all = true;
      } else {
        this.all = false;
      }
    },
    crateExpressOrderPre() {
      if (this.form.isParcelable == 'N') {
        this.$Message.error(this.$t('user.selectItemPick'));
        return;
      }
      // 预创建物流运单
      this.orderAddressId = '';
      this.orderNumList = [];
      for (let i = 0; i < this.dataList.length; i++) {
        if (this.dataList[i].active) {
          this.orderNumList.push(this.dataList[i].id);
        }
      }
      if (this.orderNumList.length == 0) {
        this.$Message.error(this.$t('user.selectItemPick'));
        return false;
      }
      // 比对收货信息是否一致
      if (this.authAddress(this.orderNumList)) {
        this.userAddressList = [];
        for (let i = 0; i < this.orderNumList.length; i++) {
          for (let j = 0; j < this.dataList.length; j++) {
            if (this.orderNumList[i] == this.dataList[j].id) {
              this.userAddressList.push(this.dataList[j].address);
            }
          }
        }
        this.orderAddressId = this.userAddressList[0].id;
        this.onExpressCreate();
      } else {
        this.$Modal.confirm({
          title: this.$t('transport.warmReminder'),
          render: (h) => {
            return h('div', {
              style: {
                color: '#666666' // 设置列表项的颜色
              }
            }, [
              h('p', [
                this.$t('user.youHaveSelectedThe'),
                h('span', {
                  style: {
                    fontWeight: 'bold', // 加粗
                    color: '#E76202' // 字体颜色
                  }
                }, `'${this.$t('user.submitShipping')}'`),
                this.$t('user.ordersDifferent')
              ]),
              h('div', [
                h('div', {
                  style: {
                    marginBottom: '6px',
                    color: '#E76202', // 设置列表项的颜色
                    fontSize: '14px'
                  }
                }, this.$t('user.selectShippingAddressAllSelectedOrdersAddress')),
                h('div', {
                  style: {
                    marginBottom: '6px',
                    color: '#E76202', // 设置列表项的颜色
                    fontSize: '14px'
                  }
                }, this.$t('user.removeOrdersContinue'))
              ]),
              h('p', {
                style: {
                  color: '#333333', // 设置列表项的颜色
                  fontSize: '14px'
                }
              }, this.$t('user.selectTheAppropriateOperationAccording'))
            ]);
          },
          okText: this.$t('user.uniformAddress'),
          cancelText: this.$t('user.removeDifferentAddresses'),
          onOk: () => {
            this.onFilterAddress();
          }
        });
      }
    },
    onSelectAddressId() {
      // 确认选择的地址
      if (this.orderAddressId == '') {
        return false;
      }
      this.selectAddressPop = false;
      this.onExpressCreate();
    },
    onFilterAddress() {
      // 过滤出现在的订单
      this.selectAddressPop = true;
      this.userAddressList = [];
      for (let i = 0; i < this.orderNumList.length; i++) {
        for (let j = 0; j < this.dataList.length; j++) {
          if (this.orderNumList[i] == this.dataList[j].id) {
            this.userAddressList.push({ ...this.dataList[j].address, ...{ orderNo: this.dataList[j].id } });
          }
        }
      }
    },
    authAddress(idList) {
      if (idList.length < 2) {
        // 如果选中的订单少于2个，认为地址是“一致的”，因为没有比较的意义
        return true;
      }
      let list = [];
      for (let i = 0; i < idList.length; i++) {
        for (let j = 0; j < this.dataList.length; j++) {
          if (idList[i] == this.dataList[j].id) {
            list.push(this.dataList[j]);
          }
        }
      }
      const baseAddress = list[0].address; // 直接使用第一个订单的地址作为基准地址
      for (let i = 1; i < list.length; i++) { // 从第二个订单开始比较
        const orderAddress = list[i].address;
        if (!this.isAddressSame(baseAddress, orderAddress)) {
          return false;
        }
      }
      // 所有选中的订单地址信息都一致
      return true;
    },

    isAddressSame(address1, address2) {
      // 这个函数用于比较两个地址对象是否完全相同
      return address1.countryCode === address2.countryCode &&
        address1.provinceText.trim() === address2.provinceText.trim() &&
        address1.cityText.trim() === address2.cityText.trim() &&
        address1.areaText.trim() === address2.areaText.trim() &&
        address1.addressDetail.trim() === address2.addressDetail.trim();
    },

    onExpressCreate() {
      // 创建物流订单
      this.createLoading = true;
      expressOrderPre(this.orderNumList, this.orderAddressId).then((res) => {
        pointUser('actions', '2011');
        this.$router.push(`/submit/parcel?id=${res.result}`);
        this.createLoading = false;
      }).catch(() => {
        this.createLoading = false;
      })
    },
    keySearch(typeKey) {
      // 搜索
      if (typeKey.code == 'Enter') {
        this.form.pageNo = 1;
        this.selectLength = 0;
        this.all = false;
        this.getDataList();
      }
    },
    SearchMet() {
      this.getDataList();
    },
    onPageSize(size) {
      // 显示
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.selectLength = 0;
      this.all = false;
      this.getDataList();
    },
    onPage(index) {
      // 下一页
      this.form.pageNo = index;
      this.selectLength = 0;
      this.all = false;
      this.getDataList();
    },
    getDataList() {
      this.dataList = [];
      // 获取订单列表
      this.loading = true;
      parcelList(this.form).then((res) => {
        let data = res.result.records;
        // data = data.filter(obj => obj.orderStatus == "STORED")
        for (let i = 0; i < data.length; i++) {
          data[i].active = false;
          data[i].disabled = data[i].orderStatus !== 'STORED';
          data[i].visible = (data[i].freeStorageDays > 0 && data[i].freeStorageDays < 11) || (data[i].freeStorageDays == 0) ? true : false;
          data[i].periodTip = data[i].freeStorageDays == 0 ? this.$t('wayBill.period_text1', { num: this.storageFreePeriod }) : data[i].freeStorageDays > 0 && data[i].freeStorageDays < 11 ? this.$t('wayBill.period_text2', { num: this.storageFreePeriod }) : `${this.$t('user.free_tips')} ${data[i].freeStorageDays} ${this.$t('user.sky')}`
        }

        // 增加查看更多信息，默认不展开showMore为false
        data.forEach(item => {
          item.showMore = false;
        })

        if (this.form.pageNo <= 1) {
          this.dataList = data;
        } else {
          this.dataList.push(data);
        }

        this.totalPage = res.result.pages;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    },
    openMet() {
      this.$refs.guideRef.open();
    },
    // 标签页面切换
    selectTab(name) {
      this.form.isParcelable = name;
      this.form.pageNo = 1;
      this.getDataList();
    },
    renderLabel(h) {
      return h('div', [
        h('span', this.$t('wayBill.tab_text_no_parcel')),
        h(Tooltip,
          {
            props: {
              content: this.$t('wayBill.tabs_tip_text'),
              placement: 'top', // 设置提示框显示在上方
              maxWidth: '300',
              transfer: true // 使用 transfer 属性
            }
          },
          [h('Icon', {
            props: {
              type: 'ios-help-circle-outline'
            },
            style: 'margin-left: 5px; color: #000000; font-size: 18px;'
          })]
        )
      ])
    },
    detMet(info) {
      this.$refs.childOrder.open(info.orderNo, info.id);
    },
    extensionMet(info) {
      this.$refs.detRef.open(info);
    },
    cancelMet(seItem) {
      this.$refs.cancelExtensionRef.open(seItem);
    },
    payMet(seItem) {
      this.$router.push(`/pay?id=${seItem.id}&&markText=diyRelevant`);
    },
    compDay(item) {
      return (item.freeStorageDays > 0 && item.freeStorageDays < 11) || (item.freeStorageDays == 0);
    },
    closeTip(item) {
      item.visible = false;
    },
    handleMouseEnter(item) {
      // if (!item.visible) {
      // 只有当visible为false时，才在鼠标移入时显示
      item.visible = true;
      // }
    },
    handleMouseLeave(item) {
      // if (!item.visible) {
      // 只有当visible为false时，才在鼠标移出时隐藏
      item.visible = false;
      // }
    }
  }
}
</script>

<style scoped lang="less">
.warehouse-container {
  border-radius: 20px;
  background: #FFF;
  padding: 20px;

  .flow-chart {
    margin-bottom: 30px;

    .flow-img {
      width: 100%;
    }
  }

  .main-content {
    .title {
      color: #2F333A;
      font-family: Inter;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin-bottom: 12px;
    }
  }

  /deep/ .ivu-tabs .ivu-tabs-ink-bar {
    background-color: #FF186B;
  }

  /deep/ .ivu-tabs .ivu-tabs-tab-active {
    color: #FF186B;
  }

  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eaeef2;

    .tabs-container {
      flex: 1;
    }

    .assistant-btn {
      background: #f0f7ff;
      color: #1890ff;
      padding: 8px 15px;
      border-radius: 20px;
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 14px;
      transition: all 0.3s;

      &:hover {
        background: #e6f7ff;
      }

      .assistant-icon {
        display: inline-block;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        background: #1890ff;
        color: #fff;
        border-radius: 50%;
        margin-right: 6px;
        font-size: 12px;
      }
    }
  }

  .search-area {
    margin-bottom: 20px;

    .search-group {
      display: flex;
      gap: 10px;

      .search-input {
        width: 250px;

        :deep(.ivu-input) {
          height: 40px;
          border-radius: 4px;
          border: 1px solid #d9d9d9;
          padding-left: 35px;
        }
      }

      .date-picker {
        width: 240px;

        :deep(.ivu-input) {
          height: 40px;
          border-radius: 4px;
        }
      }

      button {
        height: 40px;
        padding: 0 20px;
      }
    }
  }

  .table-area {
    margin-bottom: 20px;

    .table-wrapper {
      overflow: hidden;
    }

    .table-header {
      border-radius: 6px;
      background: #F5F5F5;
      padding: 12px 15px;
      font-weight: 500;
      color: #666;
      margin-bottom: 20px;

      .header-row {
        display: flex;
      }

      .header-col {
        padding: 0 10px;
        font-size: 12px;

        &.col-2 {
          width: 16.66%;
        }

        &.col-3 {
          width: 25%;
        }

        &.col-6 {
          width: 50%;
        }
      }
    }

    .table-body {
      .table-item {
        border-radius: 8px;
        border: 1px solid #F1F1F1;
        padding: 15px;
        transition: all 0.3s;
        margin-bottom: 20px;

        &:hover {
          background-color: #fafafa;
        }

        .item-header {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12px;
          padding-bottom: 10px;
          border-bottom: 1px dashed #eee;

          .header-left {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px;

            /deep/ .ivu-divider {
              margin: 0;
            }

            .platform-tag {
              margin-right: 5px;
            }

            .order-number {
              color: #969696;
              font-size: 12px;
            }

            .info-item {
              color: #969696;
              font-size: 12px;
            }
          }

          .header-right {
            display: flex;
            align-items: center;
            color: #1890ff;
            cursor: pointer;
            font-size: 14px;

            .chat-icon {
              margin-right: 5px;
              font-size: 16px;
            }

            &:hover {
              color: #40a9ff;
            }
          }
        }

        .item-content {

          .content-tools {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .consult {
              /deep/ .ivu-btn {
                height: 32px;
              }
            }
          }

          .content-row {
            display: flex;
            margin-bottom: 15px;
          }

          .content-col {
            padding: 0 10px;
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #2F333A;

            &.col-2 {
              width: 16.66%;
            }

            &.col-3 {
              width: 25%;
            }

            &.col-6 {
              width: 50%;
            }

            .product-info {
              display: flex;
              align-items: center;
              width: 100%;

              .product-checkbox {
                margin-right: 10px;
              }

              .product-image {
                width: 80px;
                height: 80px;
                margin-right: 10px;
                border-radius: 6px;
                overflow: hidden;
                flex-shrink: 0;

                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
              }

              .product-detail {
                flex: 1;

                .product-title {
                  font-weight: 500;
                  color: #2F333A;
                  margin-bottom: 5px;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 12px;
                }

                .product-attr {
                  font-size: 12px;
                  color: #666;
                  line-height: 1.5;
                }
              }
            }

            .storage-time {
              display: flex;
              flex-direction: column;
              align-items: center;

              .storage-days {
                color: #ff4d4f;
                font-size: 12px;
                margin-top: 5px;
                cursor: pointer;
                display: flex;
                align-items: center;

                .time-icon {
                  margin-right: 3px;
                }
              }
            }

            .category-tag {
              background: #FFE8F0;
              color: #FF186B;
              padding: 4px 8px;
              border-radius: 4px;
              display: flex;
              align-items: center;

              .text {
                flex: 1;
                font-size: 12px;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
              }

              .help-icon {
                margin-left: 5px;
                width: 16px;
                height: 16px;
                line-height: 16px;
                text-align: center;
                background: #FF186B;
                color: #fff;
                border-radius: 50%;
                font-size: 12px;
                cursor: help;
                display: inline-block;
              }
            }

            .action-btns {
              display: flex;
              flex-direction: column;
              gap: 8px;

              .detail-btn {
                color: #1890ff;
                cursor: pointer;
                font-weight: 500;

                &:hover {
                  color: #40a9ff;
                }
              }

              .extend-btn,
              .return-btn,
              .cancel-btn,
              .repay-btn {
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 13px;
                cursor: pointer;
                text-align: center;
              }

              .extend-btn {
                border: 1px solid #ff4d4f;
                color: #ff4d4f;

                &:hover {
                  background: #fff1f0;
                }
              }

              .return-btn {
                background: #ff4d4f;
                color: #fff;

                &:hover {
                  background: #ff7875;
                }
              }

              .cancel-btn {
                border: 1px solid #d9d9d9;
                color: #666;

                &:hover {
                  background: #f5f5f5;
                }
              }

              .repay-btn {
                background: #52c41a;
                color: #fff;

                &:hover {
                  background: #73d13d;
                }
              }

              .countdown {
                display: flex;
                align-items: center;
                justify-content: center;
                color: #ff4d4f;
                font-size: 12px;

                .help-icon.small {
                  margin-left: 3px;
                  width: 14px;
                  height: 14px;
                  line-height: 14px;
                  font-size: 10px;
                }
              }
            }
          }

          .product-photos,
          .inspection-feedback {
            margin-top: 10px;
            border-radius: 4px;

            .photos-label,
            .feedback-text {
              font-size: 11px;
              color: #2F333A;
            }

            .photos-list,
            .feedback-photos {
              display: flex;
              flex-wrap: wrap;
              gap: 10px;

              .photo {
                width: 32px;
                height: 32px;
                object-fit: cover;
                border-radius: 4px;
                cursor: pointer;
                border: 1px solid #eee;
              }
            }
          }

          .inspection-feedback {
            display: flex;
            align-items: center;
          }

          .storage-services {
            margin-top: 15px;

            .service-item {
              padding: 10px;
              background: #f6ffed;
              border-radius: 4px;
              margin-bottom: 10px;

              .service-info {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .service-desc {
                  font-size: 13px;
                  color: #333;

                  .service-price {
                    color: #ff4d4f;
                    margin: 0 5px;
                  }
                }

                .service-actions {
                  display: flex;
                  align-items: center;
                  gap: 10px;

                  .service-status {
                    font-size: 13px;
                    color: #666;
                  }

                  .service-btn {
                    padding: 3px 10px;
                    border-radius: 4px;
                    font-size: 13px;
                    cursor: pointer;

                    &.pay {
                      background: #52c41a;
                      color: #fff;

                      &:hover {
                        background: #73d13d;
                      }
                    }

                    &.cancel {
                      border: 1px solid #d9d9d9;
                      color: #666;

                      &:hover {
                        background: #f5f5f5;
                      }
                    }
                  }
                }
              }
            }
          }

          .custom-messages {
            margin-top: 15px;
            border: 1px solid #ffe7ba;
            border-radius: 4px;
            background: #fffbe6;

            .messages-content {
              padding: 10px 15px;
              max-height: 150px;
              overflow: hidden;
              transition: all 0.3s;

              &.expanded {
                max-height: none;
              }

              .custom-exception,
              .remark-item {
                margin-bottom: 15px;

                .exception-header,
                .remark-header {
                  display: flex;
                  align-items: center;
                  margin-bottom: 5px;
                  font-size: 14px;
                  color: #333;

                  .warning-icon,
                  .info-icon {
                    margin-right: 5px;
                    font-size: 16px;
                  }
                }

                .exception-text,
                .remark-text {
                  font-size: 13px;
                  color: #666;
                  line-height: 1.6;
                }

                .remark-photos {
                  display: flex;
                  flex-wrap: wrap;
                  gap: 8px;
                  margin-top: 8px;

                  .remark-photo {
                    width: 40px;
                    height: 40px;
                    object-fit: cover;
                    border-radius: 2px;
                    cursor: pointer;
                  }
                }
              }
            }

            .toggle-expand {
              padding: 8px 0;
              text-align: center;
              color: #1890ff;
              cursor: pointer;
              font-size: 13px;
              border-top: 1px dashed #ffe7ba;

              .arrow-icon {
                margin-left: 3px;
              }

              &:hover {
                color: #40a9ff;
              }
            }
          }
        }
      }
    }
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }

  .footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .action-left {
      .select-all {
        font-size: 14px;
      }
    }

    .action-right {
      display: flex;
      align-items: center;
      gap: 20px;

      .selected-count {
        font-size: 14px;
        color: #666;

        .count-number {
          color: #1890ff;
          font-weight: 500;
          margin: 0 3px;
        }
      }

      .create-waybill-btn {
        height: 40px;
        padding: 0 30px;
        font-weight: 500;
      }
    }
  }
}

.address-modal {
  .address-content {
    max-height: 400px;
    overflow-y: auto;

    .address-table {
      .address-header {
        display: flex;
        padding: 12px 15px;
        background: #f7f9fc;
        font-weight: 500;
        color: #666;
      }

      .address-body {
        .address-row {
          display: flex;
          padding: 12px 15px;
          border-bottom: 1px solid #eaeef2;
          align-items: center;

          &:hover {
            background-color: #fafafa;
          }
        }
      }

      .address-col {
        padding: 0 10px;

        &.col-7 {
          width: 58.33%;
        }

        &.col-10 {
          width: 83.33%;
        }
      }

      .address-tag {
        display: inline-block;
        margin-top: 5px;
        padding: 2px 5px;
        background: #f0f0f0;
        border-radius: 2px;
        font-size: 12px;
      }
    }
  }
}

:deep(.item-poptip) {
  z-index: 0;
}
</style>